<script lang="ts" setup>
import {ComponentInternalInstance, getCurrentInstance, reactive, ref} from "vue";
import {service} from "@/utils";
import store from '@/store'

const {proxy} = getCurrentInstance() as any;
const {user} = store.userStore;
const active = ref('base');
const onTabChange = (name: string) => {
    switch (name) {
        case 'api':
            uriProperties.handle.refresh();
            break;
    }
}

const uriProperties = reactive({
    tab: proxy?.$auth('uri:view'),
    loading: false,
    uris: [] as Array<any>,
    handle: {
        refresh: () => {
            uriProperties.loading = true;
            service.get('/setting/uri').then(({code,data}) => {
                uriProperties.uris = code === 200? data.rows:[]
            }).finally(() => uriProperties.loading = false)
        },
        add: () => {
            service.post('/setting/uri', {resourceType: 'API', creator: user.userId}).then(({code,data}) => {
                code === 200 && uriProperties.handle.refresh()
            })
        },
        edit:  (row: any, type: string) => {
            if (type === 'edit') {
                row.editing = true;
            } else if (type === 'cancel') {
                delete row.editing;
                uriProperties.handle.refresh();
            } else {
                const form = {
                    id: row.id,
                    uri: row.uri,
                    description: row.description,
                    category: row.category,
                    resourceType: row.resourceType,
                    appId: row.appId,
                    appKey: row.appKey,
                    status: row.status,
                    creator: row.creator,
                }
                service.put('/setting/uri', form).then(({code}) => {
                    if (code === 200) {
                        delete row.editing;
                    }
                    uriProperties.handle.refresh();
                })
            }
        },
        delete: (row: any) => {
            service.confirm(`确定删除${row.description}?`, {
                url: '/setting/uri',
                data: {id: row.id},
                success: uriProperties.handle.refresh
            })
        }
    }
})

</script>
<template>
    <main-page>
        <el-card shadow="never" style="height: 100%">
            <el-tabs v-model="active" tab-position="top" @tab-change="onTabChange">

                <el-tab-pane label="系统设置" name="base">
<!--                    <el-form ref="form" :model="sys" label-width="100px" style="margin-top: 20px;">-->
<!--                        <el-form-item label="系统名称">-->
<!--                            <el-input v-model="sys.name"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="LogoUrl">-->
<!--                            <el-input v-model="sys.logoUrl"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="登录开关">-->
<!--                            <el-switch v-model="sys.login"></el-switch>-->
<!--                            <div class="el-form-item-msg" data-v-b33b3cf8="">关闭后普通用户无法登录，仅允许管理员角色登录</div>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="密码验证规则">-->
<!--                            <el-input v-model="sys.passwordRules"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="版权信息">-->
<!--                            <el-input v-model="sys.copyright" :autosize="{minRows: 4}" type="textarea"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item>-->
<!--                            <el-button type="primary">保存</el-button>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->
                </el-tab-pane>

                <el-tab-pane v-if="uriProperties.tab" :label="uriProperties.tab.title" name="api" v-loading="uriProperties.loading">
                    <el-table :data="uriProperties.uris" stripe>
                        <el-table-column label="#" type="index" width="70" align="center">
                            <template #header>
                                <el-button v-auth="'uri:add'" :circle="true" :size="'small'" @click="uriProperties.handle.add()"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="URI" prop="uri" width="300">
                            <template #default="scope">
                                <el-input v-if="scope.row.editing" v-model="scope.row.uri" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="名称" prop="description" width="200">
                            <template #default="scope">
                                <el-input v-if="scope.row.editing" v-model="scope.row.description" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="类别" prop="category" width="150">
                            <template #default="scope">
                                <el-input v-if="scope.row.editing" v-model="scope.row.category" placeholder="请输入内容"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="资源类型" prop="resourceType" width="100">
                            <template #default="scope">
                                <el-select v-if="scope.row.editing" v-model="scope.row.resourceType">
                                    <el-option label="API" value="API"/>
                                    <el-option label="WEB" value="WEB"/>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="APP_ID" prop="appId" :min-width="150">
                            <template #default="scope">
                                <el-input v-if="scope.row.editing" v-model="scope.row.appId" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="APP_KEY" prop="appKey" :min-width="150">
                            <template #default="scope">
                                <el-input v-if="scope.row.editing" v-model="scope.row.appKey" placeholder="请输入内容"></el-input>
                                <span v-else>{{ scope.row.appKey }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="status" width="90"/>
                        <el-table-column fixed="right" align="center" label="操作" width="200">
                            <template #default="scope">
                                <span class="kt-operation">
                                    <el-button v-if="!scope.row.editing" v-auth="'uri:update'" text type="primary" @click="uriProperties.handle.edit(scope.row, 'edit')"/>
                                    <el-button v-else v-auth="'uri:update'" text type="primary" @click="uriProperties.handle.edit(scope.row, 'save')">
                                        <template #icon>
                                            <svg-icon icon="icon-save"/>
                                        </template>
                                        保存
                                    </el-button>
                                    <el-button v-if="scope.row.editing" text type="danger" @click="uriProperties.handle.edit(scope.row, 'cancel')">
                                        <template #icon>
                                            <svg-icon icon="icon-close"/>
                                        </template>
                                        取消
                                    </el-button>
                                    <el-button  v-if="!scope.row.editing"  v-auth="'uri:delete'" text type="danger" @click="uriProperties.handle.delete(scope.row)"/>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="短信配置" name="two">
<!--                    <el-form ref="form" :model="msg" label-width="100px" style="margin-top: 20px;">-->
<!--                        <el-form-item label="短信开关">-->
<!--                            <el-switch v-model="msg.open"></el-switch>-->
<!--                            <div class="el-form-item-msg" data-v-b33b3cf8="">关闭后用户无法收到短信，但日志中将记录</div>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="appKey">-->
<!--                            <el-input v-model="msg.appKey"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="secretKey">-->
<!--                            <el-input v-model="msg.secretKey"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item>-->
<!--                            <el-button type="primary">保存</el-button>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->
                </el-tab-pane>

            </el-tabs>
        </el-card>
    </main-page>
</template>
<style>
.kt-operation {
    width: 100%;

    .el-button + .el-button{
        margin: 0;
    }
}
</style>
